var media = 0;
var dpreview = false;

function radio(e) {
	if (media != e)
	{
		if (media == 1)
		{
			var rem = document.getElementById('link_span1');
			rem.parentNode.parentNode.removeChild(rem.parentNode);
			var rem = document.getElementById('link_span2');
			rem.parentNode.parentNode.removeChild(rem.parentNode);
			if (dpreview)
			{
				var rem = document.getElementById('preview1');
				rem.parentNode.removeChild(rem);
				var rem = document.getElementById('desc1');
				rem.parentNode.removeChild(rem);
				dpreview = false;
			}
		}
		else if (media == 2)
		{
			var rem = document.getElementById('image_span');
			rem.parentNode.parentNode.removeChild(rem.parentNode);
			if (dpreview)
			{
				var rem = document.getElementById('img1');
				rem.parentNode.removeChild(rem);
				dpreview = false;
			}
		}
		else if (media == 3)
		{
			var rem = document.getElementById('video_span');
			rem.parentNode.parentNode.removeChild(rem.parentNode);
			if (dpreview)
			{
				var rem = document.getElementById('vid1');
				rem.parentNode.removeChild(rem);
				dpreview = false;
			}
		}
		if (media != 0)
		{
			var rem = document.getElementById('post');
			rem.parentNode.removeChild(rem);
			var rem = document.getElementById('preview');
			rem.parentNode.removeChild(rem);
		}
		if (e == 1)
		{
			var newdiv = document.createElement('div');
			newdiv.innerHTML = 
			"<label>" +
			"<span id='link_span1' class='spaninvalid' >Link</span>" +
			"<input class='text' id='link1' type='text' name='link'>" +
			"</label>";
			document.getElementById('posting').appendChild(newdiv);
			var newdiv2 = document.createElement('div');
			newdiv2.innerHTML = 
			"<label>" +
			"<span id='link_span2' class='spaninvalid' >Deskripsi Singkat</span>" +
			"<textarea class='about' id='link2' rows='10' cols='40' name='desc'></textarea>" +
			"</label>";
			document.getElementById('posting').appendChild(newdiv2);
			var newdiv3 = document.createElement('div');
			newdiv3.innerHTML = 
			"<input type='button' class='daftardisabled' value='Post'  disabled='disabled' id='post' onclick='Submit()'/>" +
			"<input type='button' class='daftardisabled' value='Preview'  disabled='disabled' id='preview' onclick='Preview()'/>";
			document.getElementById('posting').appendChild(newdiv3);
		}
		else if (e == 2)
		{
			var newdiv = document.createElement('div');
			newdiv.innerHTML = 
			"<label>" +
			"<span id='image_span' class='spaninvalid' >Image</span>" +
			"<input class='text' accept='image/JPG|image/JPEG' id='image' type='file' name='img'>" +
			"</label>";
			document.getElementById('posting').appendChild(newdiv);
			var newdiv2 = document.createElement('div');
			newdiv2.innerHTML = 
			"<input type='button' class='daftardisabled' value='Post'  disabled='disabled' id='post' onclick='Submit()'/>" +
			"<input type='button' class='daftardisabled' value='Preview'  disabled='disabled' id='preview' onclick='Preview()'/>";
			document.getElementById('posting').appendChild(newdiv2);
		}
		else if (e == 3)
		{
			var newdiv = document.createElement('div');
			newdiv.innerHTML = 
			"<label>" +
			"<span id='video_span' class='spaninvalid' >YouTube Link</span>" +
			"<input class='text' id='video' type='text' name='vid'>" +
			"</label>";
			document.getElementById('posting').appendChild(newdiv);
			var newdiv2 = document.createElement('div');
			newdiv2.innerHTML = 
			"<input type='button' class='daftardisabled' value='Post'  disabled='disabled' id='post' onclick='Submit()'/>" +
			"<input type='button' class='daftardisabled' value='Preview'  disabled='disabled' id='preview' onclick='Preview()'/>";
			document.getElementById('posting').appendChild(newdiv2);
		}
		media = e;
	}
}

function Preview() {
	if (dpreview)
	{
		if (media == 1)
		{
			var rem = document.getElementById('preview1');
			rem.parentNode.removeChild(rem);
			var rem = document.getElementById('desc1');
			rem.parentNode.removeChild(rem);
		}
		else if (media == 2)
		{
			var rem = document.getElementById('img1');
			rem.parentNode.removeChild(rem);
		}
		else if (media == 3)
		{
			var rem = document.getElementById('vid1');
			rem.parentNode.removeChild(rem);
		}
	}
	if (media == 1)
	{
		var newdiv = document.createElement('div');
		newdiv.innerHTML =
		"<a id='preview1' href='" + document.getElementsByName('link')[0].value + "'>" + document.getElementsByName('link')[0].value + "</a>";
		document.getElementById('posting').appendChild(newdiv);
		var newdiv2 = document.createElement('div');
		newdiv2.innerHTML =
		"<i id='desc1'>" + document.getElementsByName('desc')[0].value + "</i>";
		document.getElementById('posting').appendChild(newdiv2);
	}
	else if (media == 2)
	{
		var newdiv = document.createElement('div');
		newdiv.innerHTML =
		"<img src='images/dummy-outdoor-security-cameras.jpg' alt='logo' id='img1' />";
		document.getElementById('posting').appendChild(newdiv);
	}
	else if (media == 3)
	{
		var newdiv = document.createElement('div');
		newdiv.innerHTML =
		"<object id='vid1' type='application/x-shockwave-flash' width='600px' height='400px' data='"+ document.getElementsByName('vid')[0].value +"'><param name='movie' value='"+ document.getElementsByName('vid')[0].value +"' /></object>";
		document.getElementById('posting').appendChild(newdiv);
	}
	dpreview = true;
}

function Submit() {
	document.location.href = "index.html";
}

function checkForms() {
	var isvalid = true;
	var isprev = true;
	
	var judul = document.getElementsByName("judul")[0].value;
	
	// check field judul
	if (!judul.length > 0){
		isvalid = isvalid&& false;				
		document.getElementById("judul_span").className = "spaninvalid";
	}else{
		document.getElementById("judul_span").className = "spanvalid";
	}

	if (media == 1)
	{
		
		var link1 = document.getElementsByName('link')[0].value;
		var link2 = document.getElementsByName('desc')[0].value;
		
		if (!(link1.match(/[a-zA-Z0-9]+\.[a-zA-Z0-9]+/i))){
			isvalid = isvalid&& false;
			isprev = isprev&& false;
			document.getElementById("link_span1").className = "spaninvalid";
		}else{
			document.getElementById("link_span1").className = "spanvalid";
		}	
		if (!(link2.length > 0)){
			isvalid = isvalid&& false;
			isprev = isprev&& false;
			document.getElementById("link_span2").className = "spaninvalid";
		}else{
			document.getElementById("link_span2").className = "spanvalid";
		}
	}
	else if (media == 2)
	{
		var img = document.getElementsByName('img')[0].value;
		
		if (img === ""){
			isvalid = isvalid&& false;
			isprev = isprev&& false;
			document.getElementById("image_span").className = "spaninvalid";
		}else{
			document.getElementById("image_span").className = "spanvalid";
		}
	}
	else if (media == 3)
	{
		var vid = document.getElementsByName('vid')[0].value;
		
		if (!vid.length > 0){
			isvalid = isvalid&& false;
			isprev = isprev&& false;
			document.getElementById("video_span").className = "spaninvalid";
		}else{
			document.getElementById("video_span").className = "spanvalid";
		}
	}
	if (isprev)
	{
		document.getElementById("preview").disabled = "";		
		document.getElementById("preview").className = "daftarenabled";
	}
	else
	{
		document.getElementById("preview").disabled = "disabled";		
		document.getElementById("preview").className = "daftardisabled";
	}
	if (isvalid)
	{
		document.getElementById("post").disabled = "";		
		document.getElementById("post").className = "daftarenabled";
	}
	else
	{
		document.getElementById("post").disabled = "disabled";		
		document.getElementById("post").className = "daftardisabled";
	}
	
return true;
}
window.captureEvents(Event.KEYPRESS); 
window.onkeyup = checkForms;
window.onmouseup = checkForms;